<template>
    <div class="body">
        <div class="banner banMis">
            <mt-swipe :auto="4000" :continuous="true">
                <mt-swipe-item v-for="(item,index) in bannerList" :key="index">
                    <a :href="item.link_url">
                        <img :src="item.thumb" alt="">
                    </a>
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <div class="header">
            <ol>
                <li :style="{left:jindu}"></li>
            </ol>
            <dl>
                <dd>
                    <h1>此处任务名称十个字内进度<span>54%</span></h1>
                    <h2>继续您的活动任务得奖励</h2>
                </dd>
                <dt><i>继续活动</i></dt>
            </dl>
            <p></p>
        </div>

        <div class="nav" ref="navBox">
            <div :class="{navboxactive:navlistClass}">
                <ul>
                    <li v-if="nomission" :class="{active:icur===2}" @click="tabcheck(2)">
                        <h1>未完成任务</h1>
                        <p></p>
                    </li>
                    <li :class="{active:icur===0}" @click="tabcheck(0)">
                        <h1>普通任务</h1>
                        <p></p>
                    </li>
                    <li :class="{active:icur===1}" @click="tabcheck(1)">
                        <h1>会员任务</h1>
                        <p></p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="swiperwrap" ref="swilperbox">
            <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
                <!-- slides -->
                <swiper-slide :indexer="2" v-if="nomission">
                    <div ref="listBox" class="listbox">
                        <img v-if="mislist.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

                        <div class="misbox" v-if="icur===2">
                            <dl @click="$router.push({path: '/steps',query:{task_id:item.user_task_id,state:0}})"
                                v-for="(item,index) in mislist" :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>

                        <div class="misbox" v-if="icur!==2">
                            <dl @click="$router.push({path: '/detial',query:{id:item.id}})"
                                v-for="(item,index) in mislist"
                                :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>
                    </div>
                    <h5 v-if="mislist.length>10 && !listkey" @click="addMore()">加载更多</h5>
                </swiper-slide>
                <swiper-slide :indexer="0">
                    <div ref="listBox" class="listbox">
                        <img v-if="mislist.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

                        <div class="misbox" v-if="icur===2">
                            <dl @click="$router.push({path: '/steps',query:{task_id:item.user_task_id,state:0}})"
                                v-for="(item,index) in mislist" :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>

                        <div class="misbox" v-if="icur!==2">
                            <dl @click="$router.push({path: '/detial',query:{id:item.id}})"
                                v-for="(item,index) in mislist"
                                :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>
                    </div>
                    <h5 v-if="mislist.length>10 && !listkey" @click="addMore()">加载更多</h5>
                </swiper-slide>
                <swiper-slide :indexer="1">
                    <div ref="listBox" class="listbox">
                        <img v-if="mislist.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

                        <div class="misbox" v-if="icur===2">
                            <dl @click="$router.push({path: '/steps',query:{task_id:item.user_task_id,state:0}})"
                                v-for="(item,index) in mislist" :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>

                        <div class="misbox" v-if="icur!==2">
                            <dl @click="$router.push({path: '/detial',query:{id:item.id}})"
                                v-for="(item,index) in mislist"
                                :key="index">
                                <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                                <dt>
                                    <h1 class="ellipsis">{{item.name}}</h1>
                                    <h2>{{item.intro}}</h2>
                                    <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                                    <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                                </dt>
                            </dl>
                        </div>
                    </div>
                    <h5 v-if="mislist.length>10 && !listkey" @click="addMore()">加载更多</h5>
                </swiper-slide>
            </swiper>
        </div>

        <div class="btmBox"></div>
    </div>
</template>

<script>
    import {axiosPost} from "../../axios";
    import {Toast, Indicator} from "mint-ui";

    export default {
        name: "",
        data() {
            return {
                jin: 55,
                icur: 2,
                mislist: [],
                bannerList: [],
                navlistClass: false,
                listkey: false,
                nomission: true,
                swiperObj: null,
                newindexNum:0,//记录滑块当前的值
                proNum: 0,//滚动过渡值
                swiperOption: {
                    watchSlidesProgress: true,
                    // progress:true,
                    //循环
                    loop: true,
                    slide: 1,
                    paginationClickable: true,
                    on: {
                        slideChangeTransitionEnd: () => {
                            this.swiperObj = this.$refs.mySwiper.$swiper;
                            let swiper = this.swiperObj;
                            if (swiper) {
                                //console.log(swiper)
                                let indexnum = swiper.slides[swiper.activeIndex].attributes.indexer.value;
                                this.newindexNum = indexnum;
                                this.icur = parseInt(indexnum);
                                this.getmission();
                                sessionStorage.icur = parseInt(indexnum);
                                this.listkey = false;
                                this.$refs.listBox.style.height = 'auto';
                                Indicator.open({
                                    text: '加载中...',
                                    spinnerType: 'double-bounce'
                                });
                            }
                        },
                        progress: () => {
                            this.swiperObj = this.$refs.mySwiper.$swiper;
                            if (this.swiperObj) {
                                for (let i = 0; i < this.swiperObj.slides.length; i++) {
                                    if (this.swiperObj.slides[i] == this.swiperObj.slides[this.swiperObj.activeIndex]) {
                                        // console.log(this.swiperObj.slides[i].progress)
                                        if (this.proNum > this.swiperObj.slides[i].progress) {
                                            this.$refs.navBox.children[0].children[0].children[this.mathIndex('now',this.newindexNum)].children[1].style.opacity = this.swiperObj.slides[i].progress;
                                            this.$refs.navBox.children[0].children[0].children[this.mathIndex('right',this.newindexNum)].children[1].style.opacity = 1-this.swiperObj.slides[i].progress;
                                            console.log(this.$refs.navBox.children[0].children[0].children[this.mathIndex('now',this.newindexNum)])
                                            console.log(this.$refs.navBox.children[0].children[0].children[this.mathIndex('right',this.newindexNum)])
                                        } else if (this.proNum < this.swiperObj.slides[i].progress) {
                                            // console.log('向左滑动---')
                                        }
                                        this.proNum = this.swiperObj.slides[i].progress;
                                    }
                                }
                            }

                        }
                    }
                }
            }
        },
        computed: {
            jindu() {
                return -(1.07 - 1.07 / 100 * (this.jin)) + 'rem'
            }
        },
        created() {

        },
        mounted() {
            if (!localStorage.getItem('userinfo')) {
                sessionStorage.icur = 0;
                this.icur = 0;
                this.nomission = false;
                this.getmission();
                this.getBanner();
            } else {
                axiosPost('index/task_list', {
                    'select_type': 2
                }, (res) => {
                    //console.log(res)
                    if (res.code != 1) {
                        sessionStorage.icur = 0;
                        this.icur = 0;
                        this.nomission = false;
                    } else {
                        this.nomission = true;
                    }
                    if (this.$route.query.id || this.$route.query.id == 0) {
                        this.icur = this.$route.query.id;
                    } else {
                        if (sessionStorage.icur) {
                            this.icur = parseInt(sessionStorage.icur);
                        }
                    }
                    this.getmission();

                    this.getBanner();
                });
                window.addEventListener('scroll', this.handleScroll, true);
            }
        },
        methods: {
            //封装换取index
            mathIndex(type, num) {
                let newindex = 0;
                num = parseInt(num)
                if(this.nomission){
                    switch (type) {
                        case 'now':
                            switch (num) {
                                case 2:
                                    newindex = 0;
                                    break;
                                case 0:
                                    newindex = 1;
                                    break;
                                case 1:
                                    newindex = 2;
                                    break;
                                default:
                                    newindex = 0;
                                    break;
                            }
                            break;
                        case 'left':
                            switch (num) {
                                case 2:
                                    newindex = 1;
                                    break;
                                case 0:
                                    newindex = 2;
                                    break;
                                case 1:
                                    newindex = 0;
                                    break;
                                default:
                                    newindex = 1;
                                    break;
                            }
                            break;
                        case 'right':
                            switch (num) {
                                case 2:
                                    newindex = 2;
                                    break;
                                case 0:
                                    newindex = 0;
                                    break;
                                case 1:
                                    newindex = 1;
                                    break;
                                default:
                                    newindex = 2;
                                    break;
                            }
                            break;
                    }
                }else{
                    switch (type) {
                        case 'now':
                            switch (num) {
                                case 2:
                                    newindex = 0;
                                    break;
                                case 0:
                                    newindex = 0;
                                    break;
                                case 1:
                                    newindex = 1;
                                    break;
                                default:
                                    newindex = 0;
                                    break;
                            }
                            break;
                        case 'left':
                            switch (num) {
                                case 2:
                                    newindex = 1;
                                    break;
                                case 0:
                                    newindex = 1;
                                    break;
                                case 1:
                                    newindex = 0;
                                    break;
                                default:
                                    newindex = 1;
                                    break;
                            }
                            break;
                        case 'right':
                            switch (num) {
                                case 2:
                                    newindex = 1;
                                    break;
                                case 0:
                                    newindex = 1;
                                    break;
                                case 1:
                                    newindex = 0;
                                    break;
                                default:
                                    newindex = 1;
                                    break;
                            }
                            break;
                    }
                }
                return newindex;
            },
            callback() {
                //console.log(11111)
            },
            addMore() {
                this.listkey = !this.listkey;
                let swiper = this.$refs.mySwiper;
                if (swiper.$swiper) {
                    for (let i = 0; i < swiper.$swiper.slides.length; i++) {
                        swiper.$swiper.slides[i].children[0].style.height = 'auto';
                    }
                }
                this.$refs.listBox.style.height = 'auto';
            },
            handleScroll() {
                let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
                if (top > this.$refs.navBox.offsetTop) {
                    this.navlistClass = true;
                } else {
                    this.navlistClass = false;
                }
            },
            tabcheck(num) {
                this.icur = num;
                this.getmission();
                sessionStorage.icur = num;
                this.listkey = false;
                this.$refs.listBox.style.height = 'auto';
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'double-bounce'
                });
                this.$refs.mySwiper.$swiper.slideTo(this.getSiderIndex(num), 400, false)
            },
            getSiderIndex(num) {
                let indexnum = 0;
                if (this.nomission) {
                    switch (num) {
                        case 2:
                            indexnum = 1;
                            break;
                        case 0:
                            indexnum = 2;
                            break;
                        case 1:
                            indexnum = 3;
                            break;
                        default:
                            break;
                    }
                } else {
                    switch (num) {
                        case 2:
                            indexnum = 1;
                            break;
                        case 0:
                            indexnum = 1;
                            break;
                        case 1:
                            indexnum = 2;
                            break;
                        default:
                            break;
                    }
                }
                return indexnum
            },

            getmission() {
                axiosPost('index/task_list', {
                    'select_type': this.icur
                }, (res) => {
                    //console.log(res)
                    if (res.code === -2) {
                        localStorage.removeItem('userinfo');
                        Toast({
                            message: '登录过期，请重新登录',
                            duration: 1000
                        });
                        setTimeout(() => {
                            this.$router.push('/login');
                        }, 1500);
                        return
                    }
                    if (res.code !== 1) {
                        this.mislist = [];
                        Indicator.close();
                        return
                    }
                    this.mislist = [];
                    for (let index in res.data) {
                        this.mislist.push(res.data[index])
                    }
                    setTimeout(() => {
                        let swiper = this.$refs.mySwiper;
                        if (swiper.$swiper) {
                            for (let i = 0; i < swiper.$swiper.slides.length; i++) {
                                swiper.$swiper.slides[i].style.opacity = '1'
                                swiper.$swiper.slides[i].children[0].style.height = this.$refs.listBox.children[0].children[0].offsetHeight * 10 + this.rem() * 0.3 * 10 + 'px';
                            }
                        }
                        Indicator.close();
                    }, 200)
                });
            },
            //获取轮播图
            getBanner() {
                axiosPost('slideprojector/index', {
                    'type': 2
                }, (res) => {
                    //console.log(res)
                    if (res.code !== 1) {
                        return Toast({
                            message: res.msg,
                            duration: 1000
                        });
                    }
                    this.bannerList = res.data;
                });
            }
        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll, true)
        },
    }
</script>

<style scoped lang="less">
    @import "../../style/default";
    @import "../../style/indexlist";

    .body {
        background: @color4;
    }

    body #app .body .listActive {
        max-height: initial;
    }

    .banner {
        padding: 0.4rem;
        height: 1.8rem;

        img {
            height: 1.8rem;
        }
    }

    .header {
        padding: 0 0.4rem;

        ol {
            width: 1.07rem;
            height: 0.08rem;
            background: rgba(255, 234, 227, 1);
            border-radius: 0.04rem;
            position: relative;
            overflow: hidden;

            li {
                width: 1.07rem;
                height: 0.08rem;
                background: rgba(255, 70, 45, 1);
                border-radius: 0.04rem;
                position: absolute;
                left: -0.5rem;
                top: 0;
            }
        }

        dl {
            overflow: hidden;

            dd {
                float: left;
                width: calc(100% - 1.56rem);

                h1 {
                    font-size: @font34;
                    font-weight: 500;
                    color: @color3;
                    padding: 0.1rem 0;

                    span {
                        color: @color1;
                    }
                }

                h2 {
                    font-size: 0.24rem;
                    font-weight: 400;
                    color: rgba(170, 170, 170, 1);
                }
            }

            dt {
                width: 1.56rem;
                padding: 0.08rem 0;
                line-height: normal;
                background: @color1;
                border-radius: 0.26rem;
                text-align: center;
                font-size: @font28;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                float: right;
                margin-top: 0.2rem;
                /*display: table;*/
                /*i{*/
                /*    display: table-cell;*/
                /*    vertical-align: middle;*/
                /*}*/
            }
        }

        p {
            margin-top: 0.39rem;
            border-bottom: 1px solid rgba(239, 239, 239, 1);
        }
    }

    .nav {
        height: 1.1rem;

        .navboxactive {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }

        div {
            height: 1.1rem;
            width: 100%;
            background: @color4;

            ul {
                overflow: hidden;
                margin: 0 0.4rem;

                .active {
                    h1 {
                        font-size: 0.4rem;
                        color: @color3;
                    }

                    p {
                        display: block;
                    }
                }

                li {
                    float: left;
                    color: @color2;
                    margin-right: 0.4rem;

                    h1 {
                        line-height: 1.1rem;
                        font-size: @font32;
                        font-weight: 400;
                        height: 0.9rem;
                        overflow: hidden;
                    }

                    p {
                        width: 0.42rem;
                        height: 0.06rem;
                        background: rgba(42, 43, 63, 1);
                        margin: 0 auto;
                        display: none;
                    }
                }
            }
        }
    }

    .listbox {
        overflow: hidden;

        .misbox {
            margin-top: 0;

            dl {
                margin-top: 0;
                margin-bottom: 0.3rem;
            }
        }
    }

    h5 {
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        color: @color2;
        font-size: @font28;
        padding: 0.2rem;
    }

</style>